<!-- html cgkscb.html 开始唱标 -->
<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>开标唱标</title>
	<script charset="utf-8" src="js/vue.global.js"></script>
    <link rel="stylesheet" href="js/index.css">
    <script charset="utf-8" src="js/index.full.js"></script>
	<link rel="stylesheet" href="clock.css">
	<script charset="utf-8" src="js/jquery.min.js"></script>
</head>
<body>
	<div id="app" class="appclass">
		<img src="img/exit-full-screen.png" title="还原" alt="还原" class="full-btn back" @click="returnNormal" >
		<img src="img/go-full-screen.png" title="全屏" alt="全屏" class="full-btn go" @click="goFullscreen" >
		<div style="height: 100px;" v-if="isFull"></div>
		<div class="head-title" v-text="cgxmmc+'开标会'"></div>
		<div class="container">
			<div class="left">
				<div class="clock-area">
					<canvas id="clock" width="300" height="300"></canvas>
				</div>
				<div class="line-area">
					 <div class="line"></div><div class="title">当前时间</div>
				</div>
				<div class="content" v-text="nowTimeStr"></div>
			</div>
			<div class="center">
				<div class="vertical-line"></div>
			</div>
			<div class="right">
				<div class="content">
					<el-tag custom type="primary">项目编号</el-tag><span v-text="cgxmbh" :title="cgxmbh"></span>
				</div>
				<div class="content">
					<el-tag custom type="primary">项目名称</el-tag><span v-text="cgxmmc" :title="cgxmmc"></span>
				</div>
				<div class="content">
					<el-tag custom type="primary">开标时间</el-tag><span v-text="kbsj" :title="kbsj"></span>
				</div>
				<div class="line-area">
					<div class="line"></div><div class="title">距开标时间还有</div>
				</div>
				<div class="digits">
					<div v-for="(item,index) in digits" :class="item">
						<span v-for="val in ['d1','d2','d3','d4','d5','d6','d7']" :class="val" v-if="item!='day'&&item!='dots'"></span>
						<template v-if="item=='day'">天</template>
					</div>
				</div>
				<div :class="{'open-btn':true,'readonly':!isShow}" @click="bidOpen">开标</div>
				<!-- <div class="open-btn" @click="bidOpen">开标</div> -->
			</div>
		</div>
	</div>
	<script>
  const App = {
    data() {
      return {
		    isShow: false,		//是否显示开标按钮
			isFull: false, //是否全屏
			cgxmmc:'特斯拉modelY批量生产项目',
			cgxmbh:'2021F1',
			sjc:"",				//服务器与客户端时间差
			nowHour: "",		//当前时
			nowMinute: "",		//当前分
			nowSecond: "",		//当前秒
			nowTime:"",			//date类型的当前时间
			nowTimeMillis: "",	//当前时间毫秒数
			nowTimeStr: "",		//当前时间字符串(年月日时分秒)
			kbsj:"",			//开标时间字符串
			kscbsj:"",			//开标时间毫秒数
			digits: [],			//数字时钟
			className: [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ],
		}
	},
		mounted(){
			var d = new Date();
			//d.setTime(d.getTime()+24*60*60*1000);//取一天后 默认按24小时倒计时
			//d.setTime(d.getTime()+60*1000);//60s
			d.setTime(d.getTime()+10*1000);//10s
			this.kscbsj=d.getTime();//开标时间毫秒数
			var month = d.getMonth();
			var day = d.getDate();
			var hour = d.getHours();
			var minutes = d.getMinutes();
			var seconds = d.getSeconds();
			month = (month<10)? '0'+ month : month;
			day = (day<10)? '0'+ day : day;
			hour = (hour<10)? '0'+ hour : hour;
			minutes = (minutes<10)? '0'+ minutes : minutes;
			seconds = (seconds<10)? '0'+ seconds : seconds;
			this.kbsj = d.getFullYear()  +"年"+month+"月"+day+"日 "
			+hour+":"+minutes+":" +seconds;
		
			//var clientTimeMills = new Date().getTime();
			//var severTimeMillis = new Date(a.getResponseHeader("Date")).getTime();
			this.sjc =0  ;// severTimeMillis - clientTimeMills; //时间差 后台时间与前端js的时间差值
			this.refreshAll();
		},
		methods : {
			bidOpen: function(){
				if(!this.isShow) return;
				this.returnNormal();
				 var url = "";
				 window.location.href = url;
			},
			refreshAll: function(){
	        	//更新当前时间
	        	this.nowTimeMillis = new Date().getTime() + this.sjc;
	        	this.nowTimeMillis = parseInt(this.nowTimeMillis/1000)*1000;//忽略毫秒
				this.nowTime = new Date(this.nowTimeMillis);
	        	//更新当前时间字符串
	        	this.refreshNowTime();
	        	//canvas绘制钟表
	        	this.drawClock(this.nowHour, this.nowMinute, this.nowSecond);
	        	//设置倒计时
	        	this.countdown();
        		setTimeout(arguments.callee.bind(this), 1000);
	        },
	        //更新当前时间字符串
	        refreshNowTime: function(){
	        	var time = this.nowTime,
        			year = time.getFullYear(),
					month = (time.getMonth()+1)<10?("0"+(time.getMonth()+1)):(time.getMonth()+1),
					date = time.getDate()<10?("0"+time.getDate()):time.getDate(),
					hours = time.getHours()<10?("0"+time.getHours()):time.getHours(),
					minutes = (time.getMinutes()<10?("0"+time.getMinutes()):time.getMinutes()),
					seconds = (time.getSeconds()<10?("0"+time.getSeconds()):time.getSeconds());
					//拼成自己想要的日期格式，2018-01-15 19:05:33
					this.nowTimeStr = year+"年"+month+"月"+date+"日 "+hours+":"+minutes+":"+seconds;
					this.nowHour = time.getHours();
					this.nowMinute = time.getMinutes();
					this.nowSecond = time.getSeconds();
	        },
	        //canvas操作
	        drawClock: function(hour, minute, second) {
				var width = $("#clock").width(),
					height = $("#clock").height(),
					_ctx = $("#clock")[0].getContext('2d'),
					r = width / 2,
					rem = width / 200;
				_ctx.clearRect(0, 0, width, height);
				this.drawBackground(_ctx, r, rem);
				this.drawHour(_ctx, r, rem, hour, minute);
				this.drawMinute(_ctx, r, rem, minute);
				this.drawSecond(_ctx, r, rem, second);
				this.drawCenterCircle(_ctx, r, rem);
				_ctx.restore()
			},
	        drawBackground: function(_ctx, r, rem) {
				_ctx.save();
				_ctx.translate(r, r);
				var rad = 2 * Math.PI / 60;
				for(var i = 0; i < 60; i++) {
					_ctx.beginPath();
					if(i % 5 == 0) {
						_ctx.fillStyle = "#000";
						_ctx.fillRect(-1.5*rem, -r+5, 3*rem, 13);
					}else{
						_ctx.fillStyle = "#ccc";
						_ctx.fillRect(-rem, -r+5, 2*rem, 9);
					}
					_ctx.fill();
					_ctx.rotate(rad);
				}
			},
			drawHour: function(_ctx, r, rem, hour, minute) {
				var radH = 2 * Math.PI / 12 * hour;
				var radM = 2 * Math.PI / 12 / 60 * minute;
				_ctx.save();
				_ctx.beginPath();
				_ctx.rotate(radH + radM);
				_ctx.fillStyle = "#000";
				_ctx.moveTo(-4.5, 13 * rem);
				_ctx.lineTo(4.5, 13 * rem);
				_ctx.lineTo(2.5, -r + 45* rem);
				_ctx.lineTo(-2.5, -r + 45 * rem);
				_ctx.fill();
				_ctx.restore()
			},
			drawMinute: function(_ctx, r, rem, minute, hour) {
				var rad = 2 * Math.PI / 60 * minute;
				_ctx.save();
				_ctx.beginPath();
				_ctx.rotate(rad);
				_ctx.fillStyle = "#000";
				_ctx.moveTo(-4, 13 * rem);
				_ctx.lineTo(4, 13 * rem);
				_ctx.lineTo(2, -r + 25 * rem);
				_ctx.lineTo(-2, -r + 25 * rem);
				_ctx.fill();
				_ctx.restore()
			},
			drawSecond: function(_ctx, r, rem, second) {
				var rad = 2 * Math.PI / 60 * second;
				_ctx.save();
				_ctx.beginPath();
				_ctx.rotate(rad);
				_ctx.fillStyle = "red";
				_ctx.moveTo(-1.5, 15 * rem);
				_ctx.lineTo(1.5, 15 * rem);
				_ctx.lineTo(1, -r + 14 * rem);
				_ctx.lineTo(-1, -r + 14 * rem);
				_ctx.fill();
				_ctx.restore()
			},
			drawCenterCircle: function(_ctx, r, rem) {
				_ctx.beginPath();
				_ctx.arc(0, 0, 6, 0, 2 * Math.PI, false);
				_ctx.lineWidth = 5 * rem;
				_ctx.strokeStyle = "#000";
				_ctx.fillStyle = "#fff"
				_ctx.stroke();
				_ctx.fill();
			},
			//倒计时 并设置开标按钮
			countdown: function(){
				var t = this.kscbsj - this.nowTimeMillis;//计算时间差
				if(t<=0){ 
					this.digits = ["zero","zero","dots","zero","zero","dots","zero","zero"];
					this.isShow = true;//显示开标按钮
					if(t>=-1000){
						//ElMessage({showClose: true, message: '开标时间已到', duration: 0, type: 'success'});
						this.$notify({
						title: '成功',
						message: '开标时间已到',
						type: 'success',
						})
					}
					return ;
				}
				this.digits = [];//重置digits
			 	var d = Math.floor(t/1000/60/60/24);//相差天数
			 	if(d>2){
			 		while(d>0){
						this.digits.push(this.className[d%10]);
						d = parseInt(d/10);
					}
			 		this.digits.reverse().push("day");
			 		return ;
			 	}
	       		var h = Math.floor(t/1000/60/60);
	      	 	var m = Math.floor(t/1000/60%60);
	       		var s = Math.floor(t/1000%60);
	       		this.digits.push(h<10?"zero":this.className[parseInt(h/10)]);
	       		this.digits.push(this.className[h%10]);
	       		this.digits.push("dots");
	       		this.digits.push(m<10?"zero":this.className[parseInt(m/10)]);
	       		this.digits.push(this.className[m%10]);
	       		this.digits.push("dots");
	       		this.digits.push(s<10?"zero":this.className[parseInt(s/10)]);
	       		this.digits.push(this.className[s%10]);
			},
			//全屏
			goFullscreen: function(){
				var flag = document.fullscreenEnabled || document.mozFullscreenEnabled || document.msFullscreenEnabled || document.webkitFullscreenEnabled;
				if(!flag){
					alert(当前浏览器暂不支持全屏模式);
					return ;
				}
				var ele = parent.document.getElementById("pageframe");//本地会跨域
				ele.goFullscreen = ele.requestFullscreen || ele.mozRequestFullscreen || ele.msRequestFullscreen || ele.webkitRequestFullscreen;
				ele.goFullscreen.call(ele);
				this.isFull=true;
				$(".full-btn.go").hide();$(".full-btn.back").show();
			},
			//还原
			returnNormal: function(){
				this.isFull=false;
				parent.document.returnNormal = document.exitFullscreen || document.msExitFullscreen || document.mozCancelFullscreen ||  document.webkitExitFullscreen;
				parent.document.returnNormal();
				$(".full-btn.back").hide();$(".full-btn.go").show();
			}
		}
	
};
const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
	</script>
</body>
</html>